  // row 行数   16
  // col 列数   16
  // id_name div的id   my_table
  // breach 缺口位置    0-3
  // data_breach  电池起始位置   0-3 : 左上  左下  右上  右下
  // direction  : 数据方向      0 / 1 :  水平 垂直
  // shape : 托盘电池排序  分为U / NU 默认为UN  NU包括z形和N形  不区分大小写
  // row_name : 横向坐标
  // col_name : 纵向坐标
  // 使用方式: 
  // var param={
  //    "row":16, 
  //    "col":16,
  //    "to_div_name":"table_box_unique",
  //    "ui_breach":1,
  //    "data_breach":1,
  //    "direction":1,
  //    "title": false,             //  显示标题
  //    "text_show" : false,        //  显示每格文本
  //    "shape" : "NU",
  //    "row_name":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
  //    "col_name":["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P"]
  // };
  // var oTable= new own_table(param);
  //   for (var i = 1; i <=13; i++) {
  //    oTable.change_span(i,0,{"text":123});
  // }

   function own_table(p_o) {
     var to_div_name;
     if($("."+p_o.to_div_name).length!=0){
       to_div_name= $("."+p_o.to_div_name);
     }else{
      alert("缺失目标元素");return;
     }

      var linear_gradient = p_o.linear_gradient || 2.6;


      var text_show = p_o.text_show || false;
      var title = p_o.title||false;
      var row = p_o.row||16;
      var col = p_o.col||16;
      
      var ui_breach=p_o.ui_breach||0;
      var data_breach=p_o.data_breach||0;
      var direction=p_o.direction||0;
    
      var row_name=p_o.row_name||[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
      var col_name=p_o.col_name||["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P"];

      var breach_arr =["left_top","left_bottom","right_top","right_bottom"];
      var span_arr =["left_span","middle_span","right_span"];
      var direction_arr =["horizontal", "vertical"];
      var span_arr=['span1','span2','span3'];
      var shape=p_o.shape;

      // 定义标题栏 高度/ 宽度
      var obj  =  new Object();
      obj.row =row;
      obj.title = title;
      obj.col =col;
      obj.ui_breach =  breach_arr[ui_breach];
      obj.data_breach = breach_arr[data_breach];
      obj.row_name =row_name;
      obj.col_name = col_name;
      obj.box = to_div_name;
      obj.box_w =  obj.box.width();
      obj.box_h =  obj.box.height();
      obj.direction = direction_arr[direction];
      obj.text_show =text_show;
      obj.aa=function(){
          console.log(linear_gradient,"background","linear-gradient(-45deg,#b5b5b5 " +linear_gradient+ "em, rgba(0,0,0,0) 0)");
        };
        
      // 总电池数
      obj.count_td=function count_td(){return obj.row*obj.col};
      
      obj.get_shape= function get_shape(shape){
         if(shape.toLocaleLowerCase().match(/^["u"]$|^["n"]["u"]$/g)!=null){
          shape=shape.toLocaleLowerCase();
         }else{
             shape= "nu";
             alert("shape参数错误, 将使用默认值NU");
         }
         return shape;
      }
      obj.shape= obj.get_shape(shape);

      if(obj.direction=="horizontal"){
        if(obj.shape=="u"){
          obj.dir_shp= "h_u";
        }else{
          obj.dir_shp= "h_nu";
        }
      }else{
        if(obj.shape=="u"){
          obj.dir_shp= "v_u";
        }else{
         obj.dir_shp= "v_nu";
        }
      }
      
      obj.init_data=function(){
              var data_head='';
              var data_num='';
              var data_span='';
              var row_data=[] ;
              var simple_box='';
              var all_box=[];
              var inner_div=[];
              var box_return=[];
              var row_height = (obj.dom.height()/obj.row);
              var col_width = obj.dom.width()/obj.col;
              // console.log(col_width);

              obj.init_title_data();

              if(obj.shape=="nu"){
                
                switch (obj.direction){

                  case "horizontal":
                    for(var x=0;x<obj.row;x++){
                    data_head=obj.col*x;
                    row_data=[];
                    for(var y=1;y<obj.col+1;y++){
                      data_num=data_head+y;
                          if(obj.text_show){
                               simple_box ="<div id=" +data_num+  " class='data_num_box' style='width: "+(col_width*1)+"px; height: "+row_height+"px;'>\
                                  <div class='w h'>\
                                  <span class='half ver_center h 'style='font-size: 0.8em;font-weight: bold;'>"+(col_name[x]+''+y)+"</span>\
                                  <span class='half ver_center h'  style='font-size: 0.8em;color:black;font-weight: bold;'></span>\
                                  </div>\
                                </div>";
                          }else{
                              simple_box ="<div id=" +data_num+  " class='data_num_box' style='width: "+(col_width*1)+"px; height: "+row_height+"px;'>\
                                  <div class='w h'><span class='half ver_center h 'style='font-size: 0.8em;font-weight: bold;'></span>\
                                  <span class='half ver_center h'  style='font-size: 0.8em;color:black;font-weight: bold;'></span></div>\
                                </div>";
                          }
                       
                      // console.log(col_name, (col_name[x]+''+y));


                      row_data.push(simple_box);
                    }
                   all_box.push(row_data);
                  }
                  break;

                  case "vertical":
                    for(var x=1;x<obj.row+1;x++){
                      row_data=[];
                      for(var y=0;y<obj.col;y++){
                        data_num=x+obj.row*(y);
                        
                          if(obj.text_show){
                                 simple_box ="<div id=" +data_num+  " class='data_num_box' style='width: "+(col_width*1)+"px; height: "+row_height+"px;'>\
                                    <div class='w h'><span class='half ver_center h 'style='font-size: 0.8em;font-weight: bold;'>"+(col_name[x]+''+y)+"</span>\
                                    <span class='half ver_center h'  style='font-size: 0.8em;color:black;font-weight: bold;'></span></div>\
                                  </div>";
                            }else{
                                simple_box ="<div id=" +data_num+  " class='data_num_box' style='width: "+(col_width*1)+"px; height: "+row_height+"px;'>\
                                    <div class='w h'><span class='half ver_center h 'style='font-size: 0.8em;font-weight: bold;'></span>\
                                    <span class='half ver_center h'  style='font-size: 0.8em;color:black;font-weight: bold;'></span></div>\
                                  </div>";
                            }
                      
                        row_data.push(simple_box);
                      }

                   all_box.push(row_data);
                  }
                  break;
                  default:;
               }
              } else{
                  switch (obj.direction){
                    case "horizontal":
                      for(var x=0;x<obj.row;x++){
                        row_data=[];
                        data_head=obj.col*x;
                        for(var y=1;y<obj.col+1;y++){
                          data_num=data_head+y;

                          simple_box="<div id="+data_num+" class='data_num_box'  style='width:"+(col_width)+"px;height:"+row_height+"px;''>\
                          <span class='half h'>"+data_num+"</span>\
                          <span class='half h'></span>\
                          </div>";
                          // simple_box="<div id="+data_num+" class='data_num_box'  style='width:"+(col_width)+"px;height:"+row_height+"px;''><span class='left_top'></span><span class='right_top'></span><span class='left_bottom'>"+data_num+"</span><span class='right_bottom'></span></div>";
                          row_data.push(simple_box);
                        }
                        if(x%2==1){
                          // console.log(row_data);
                          row_data=row_data.reverse();
                        }
                        all_box.push(row_data); 
                      }
                      break;

                    case "vertical":
                        for(var x=1;x<obj.row+1;x++){
                           row_data=[];
                          for(var y=0;y<obj.col;y++){
                            data_num=x+obj.row*(y);

                            if(y%2==1){
                              data_num=(obj.row-x+1)+obj.row*(y);
                            }
                           simple_box="<div id="+data_num+" class='data_num_box'  style='width:"+(col_width)+"px;height:"+row_height+"px;''>\
                          <span class='half h'>"+data_num+"</span>\
                          <span class='half h'></span>\
                          </div>";
                            // simple_box="<div id="+data_num+" class='data_num_box'  style='width:"+(col_width)+"px;height:"+row_height+"px;''><span class='left_top'></span><span class='right_top'></span><span class='left_bottom'>"+data_num+"</span><span class='right_bottom'></span></div>";
                            row_data.push(simple_box);

                        }
     
                    all_box.push(row_data);
                    }
                    break;

                    default:;
                     }
              }

              // 数据翻转
              switch(obj.data_breach){
                // 垂直翻转
                case "left_bottom":
                  all_box=all_box.reverse();
                  break;
                // 水平翻转
                case "right_top":
                  all_box.forEach(function(a){
                    a=a.reverse();
                    box_return.push(a);
                  });
                  break;
                // 垂直 + 水平 翻转
                case "right_bottom":
                  all_box=all_box.reverse();
                  all_box.forEach(function(a){
                    a=a.reverse();
                    box_return.push(a);
                  });
                  break;
                default:;
              }

              for(let i of all_box){
                 for(let j of i){
                   inner_div.push(j);

                 }
               
              }
           
            obj.dom.html(inner_div);
      };


      obj.init_t_ui=function(){
        obj.box.find(".t_title,.b_title").height(obj.box_h*0.06);
        obj.box.find(".my_table").height(obj.box_h*0.88);

        obj.t_title_h= obj.box.find(".t_title").height();
        obj.box.find(".l_title,.r_title").width(obj.t_title_h);
       
        // ui crash_1
        obj.box.find(".data_zone,.t_title,.b_title").width(obj.box_w-obj.t_title_h*2-3);
       

      };

      obj.init_title_data=function(){
         var col_title_init=obj.set_row_title();
         var row_title_init=obj.set_col_title();

          $(".t_title,.b_title").html(col_title_init);

          if(obj.ui_breach=="left_top"||obj.ui_breach=="left_bottom"){
            obj.box.find(".l_title").html(row_title_init[0]);
            obj.box.find(".r_title").html(row_title_init[1]);
          }else{
            obj.box.find(".l_title").html(row_title_init[1]);
            obj.box.find(".r_title").html(row_title_init[0]);
          }
          //调整缺角位置
         obj.change_ui_breach();
      }
       //添加标题_row   1-16
      obj.set_row_title=function set_row_title(){
              //  ui crash_2
              var row_width=(obj.box_w-obj.t_title_h*2)/obj.col-0.2;
              var row_name=obj.row_name;
              var breach =obj.breach;
              var row_box=[];
              var simple_box='';
              var title_div='';

              for(let i=0;i<obj.col;++i){
                simple_box="<div style='width:"+row_width+"px;float:left;height:100%;' class='x_col_num_div'><div class='title_col_boxtitle_col_box'>"+row_name[i]+"</div></div>";
                row_box.push(simple_box);
              }
              
              if(obj.data_breach=="right_top" || obj.data_breach=="right_bottom"){
                row_box=row_box.reverse();
              }

              row_box.forEach(function(a){
                title_div+=a;
              });

              return title_div;
      }
         
       // 添加标题_col  A-P
      obj.set_col_title= function set_col_title(){

            var blank_height=obj.box_h*0.06;
            var row_height=obj.box_h*0.88/obj.row;
            var col_name=obj.col_name;
            var row=obj.row;

            var col_box=[];
            var title_div='';
            var title_div_mirror='';
            var result_title_div=[];
            var simple_box='';
            var simple_box_2='';

            // 空白角
            col_box.push("<div style='width:100%;height:"+blank_height+"px;'  class='y_row_num_div'><div class='title_row_box'></div></div>");

            for(let i=0;i<obj.row;++i){
              // console.log(col_name[i]);
              simple_box="<div style='width:100%;height:"+row_height+"px;' class='y_row_num_div'><div class='title_row_box h ver_center'>"+col_name[i]+"</div></div>";
              col_box.push(simple_box);
            }

            // 空白角
            simple_box_2="<div style='width:100%;height:"+blank_height+"px;'  class='y_row_num_div'><div class='title_row_box'></div></div>";
            col_box.push(simple_box_2);
  
            // console.log(obj.data_breach);
            if(obj.data_breach=="left_bottom" || obj.data_breach=="right_bottom"){
              col_box=col_box.reverse();
              col_box.forEach(function(a){
                title_div+=a;
              });
              
              col_box.pop();
              col_box.push(simple_box_2);
            }else{
              col_box.forEach(function(a){
                title_div+=a;
              });
              col_box.shift();
              col_box.unshift(simple_box_2);
            }
             // console.log(col_box);
            col_box.forEach(function(a){
              title_div_mirror+=a;
            });
 
            result_title_div.push(title_div);
            result_title_div.push(title_div_mirror);
            return result_title_div;
      }
     
      //调整缺角样式
      obj.change_ui_breach= function change_ui_breach(){
        var breach =obj.ui_breach;
         

        if(breach=="left_top"){
            obj.box.find(".l_title .y_row_num_div").eq(0).addClass("triangle_top");
            obj.box.find(".triangle_top").css("background","linear-gradient(-45deg,#b5b5b5 " +linear_gradient+ "em, rgba(0,0,0,0) 0)");


        }else if(breach=="left_bottom"){
          // alert(obj.col+1);
            obj.box.find(".l_title .y_row_num_div").eq(obj.row+1).addClass("triangle_top");
            obj.box.find(".triangle_top").css("background","linear-gradient(-135deg,#b5b5b5 " +linear_gradient+ "em, rgba(0,0,0,0) 0)");
        }else if(breach=="right_top"){
             obj.box.find(".r_title .y_row_num_div").eq(0).addClass("triangle_top");
            obj.box.find(".triangle_top").css("background","linear-gradient(45deg,#b5b5b5 " +linear_gradient+ "em, rgba(0,0,0,0) 0)");
        }else{ " +linear_gradient+ "

             obj.box.find(".r_title .y_row_num_div").eq(obj.row+1).addClass("triangle_top");
            obj.box.find(".triangle_top").css("background","linear-gradient(135deg,#b5b5b5 " +linear_gradient+ "em, rgba(0,0,0,0) 0)");
        }
        obj.box.find(".triangle_top").css("border-top","none");
        obj.box.find(".triangle_top").css("border-right","none");
      }


      // 遍历更换元素内容, 参数说明如下:
      //span_idx 为电池id
      //name 为id 的span 的name
      // text 为填入的文本内容
      obj.new_change_span=function(span_idx, name, text){
          if(span_idx==null){
              alert("change_span_text缺失第id");
              return;
            }
            if(name==null){
              alert("change_span_text缺失name");
              return;
            }
            if(text==null){
              alert("change_span_text缺失text");
              return;
            }
            // console.log(oTable.box.find('#'+span_idx+'[name="'+name+'"]'),'#'+span_idx+' [name="'+name+'"]');
            text = "<b class='col-xs-8'>"+ name +":</b>  <span class='col-xs-4'>" + text +"</span>";
            // 替换span 数据
            oTable.box.find('#'+span_idx+' [name='+name+']').html(text);
      };

      

      // 右键
      // obj.context_click=function context_click(){
      //       var context_menu = [
      //         {
      //           // icon: 'glyph// icon-plus',
      //             text: '发送',
      //             action: function(e, selector) { 
      //                battery_control_sent(e,selector); 
      //             }
      //         },{
      //             text: '查看曲线',
      //             href: "HFCurveViewer://cellNum$1,batteryIndexfrom$1,batteryIndexto$8,batteryFilePath$D:/temp",
      //         }, {
      //           text: '通道特殊控制', subMenu: [
      //             {
      //               text: '暂停', 
      //               action: function(e,selector){
      //                 battery_control_stop(e,selector); 
      //             }},
      //             {text: '继续', action: function(e,selector){
      //               battery_control_start(e,selector); 
      //             }},
      //             {text: '通道复位',  action: function(e,selector){
      //               battery_control_reset(e,selector); 
      //             }},
      //             {text: '终止当前工步', action: function(e,selector){
      //               battery_control_stop_current_step(e,selector); 
      //             }},
      //         ]},

      //         {
      //             // icon: 'glyph// icon-plus',
      //             text: '设定值信息',
      //             action: function(e, selector) { 
      //                 battery_show_msg(e,selector); 
      //             }
      //         },
      //         {
      //             // icon: 'glyph// icon-plus',
      //             text: '版本',
      //             action: function(e, selector) { 
      //                 battery_show_version(e,selector); 
      //             }
      //         },{
      //             // icon: 'glyph// icon-trash',
      //             text: '激活',
      //             action: function(e, selector) {
      //                 battery_active(e,selector);
      //             }
      //         }
      //       ];
      //       // 阻止预定义右键行为
      //       context.init({preventDoubleContext: true});
      //       // 绑定事件
      //       // console.log(to_div_name);
      //       context.attach("."+p_o.to_div_name, context_menu);
      //   }
      // 表格初始化 ,有元素则初始化
      obj.init=function(){
        var div_content ='<!-- 左侧标题 -->  <div class="l_title" style="height: 100%;float: left;">  </div>  \
        <div class="data_zone"style="height: 100%;float: left;background-color: white">   \
         <!-- 顶部标题 -->    <div class="t_title" style="width: 100%"></div>  \
          <div class="my_table" class="" style="width: 100%"></div>      \
          <!-- 底部标题 -->    <div class="b_title" style="width: 100%"></div>  </div> \
           <!-- 右侧标题 -->  <div class="r_title" style="height: 100%;float: left;">  </div>';
           // console.log(div_content);
 
        obj.box.html(div_content);
        obj.dom = obj.box.find(".my_table");

        obj.init_t_ui();

        obj.init_data();
        
        if(obj.row >=6||obj.col>=6){
            if(obj.row >=12||obj.col>=12){
               obj.dom.find(".data_num_box span").css("font-size","0.5em");
            }
            obj.dom.find(".data_num_box span").css("font-size","0.8em");
        }else{
          obj.dom.find(".data_num_box span").css("font-size","1em");
        }
        // try{
          // obj.context_click();
        // }catch(e){
        //   // console.log(e);
        // }
        
      
      }

      if(obj.box.length!=0){
         obj.init();
      }
      return obj;
   }



  // for phone which width<750px

  // 使用方式: 
  // var param={
  //      "battery_count":24, 
  //      "to_div_name":"demo",
  //  };
  // var oTable= new own_table_phone(param);
  // oTable.change_data(index,{cur:,vol:});
  function own_table_phone(p_o){
        var obj  =  new Object();
        if($("."+p_o.to_div_name).length!=0){
          obj.box= $("."+p_o.to_div_name);
          if(obj.box.html()!=''){
            obj.box.html('');
          }
        }else{
          alert("缺失父元素");return;
        }
        obj.box_html= '<div class="title row text-center" style=""><div class="h id_part_title pull-left" style="width:20%"></div><div class="h data_part_title pull-left" style="width:80%"></div></div><div class="data row text-center"><div class=" h id_part pull-left" style="width:20%"><div class="col-xs-12" class=""></div></div><div class=" h data_part pull-left" style="width:80%"></div></div>';
        init_ui();
      
        function init_ui(){

          obj.box.html(obj.box_html);

          obj.battery_count= p_o.battery_count;
          // obj.ele_height=obj.box.height();
          obj.ele_height=window.screen.availHeight;
          obj.box.height(obj.ele_height);
          obj.box.css('overflow-y',"auto");
          obj.list_count=15;  //  display per page
          obj.per_ele_height = obj.ele_height/obj.list_count;
         
          var html_id= '';

          for (let i=1;i<=obj.battery_count;++i) {
            var html= '<div class=" per_ele_height">'+i+'</div>';
            html_id+=html;
          }
          obj.box.find('.id_part').html(html_id);
          obj.box.find('.data_part').html(html_id);
          obj.box.find('.id_part .per_ele_height,.data_part .per_ele_height').height(obj.per_ele_height);
          obj.box.find('.id_part .per_ele_height,.data_part .per_ele_height').css("line-height",obj.per_ele_height+"px");

          obj.box.find('.id_part_title').html("<b>ID</b>");
          obj.box.find('.data_part_title').html("<span class='half bor-r'><b>电流</b></span><span class='half'><b>电压</b></span>");

          obj.box.find('.id_part_title').height(obj.per_ele_height);
          obj.box.find('.data_part_title').height(obj.per_ele_height);
          obj.box.find('.data_part_title,.id_part_title').css("line-height",obj.per_ele_height+'px');

          obj.box.find(".data").height(obj.box-obj.per_ele_height);
          obj.data_per_half='<div class="col-xs-6 left h"></div><div class="col-xs-6 h right"></div>';
          obj.box.find(".data_part .per_ele_height").each(function(a,b){
            $(b).html(obj.data_per_half);
          });
            obj.box.find('.per_ele_height').addClass('bor');
            obj.box.find('.left').addClass('bor-r');
            obj.box.find('.title div').addClass('bor');

          }
        // index 0 start
        obj.change_data= function change_data(index,par){
          var cur=par.cur;
          var vol=par.vol;
          obj.box.find(".data_part .left").eq(index).html(cur);
          obj.box.find(".data_part .right").eq(index).html(vol);
        }
        // obj.box.find('.data').css('overflow-y',"auto");
        // console.log(obj.init_data);
        return obj;
  }


